<template>
	<view class="charge-content">
		<view class="open-box" v-if="newDay">
			<view class="open-left">
				<view class="title">新用户免费体验</view>
				<view class="title">备注：开启后免费体验{{newDay}}天</view>
			</view>
			<view class="open-right">
				<view class="title">{{is_open==1?'开启':'关闭'}}</view>
				<uv-switch v-model="is_open" :active-value="1" :inactive-value="2" ></uv-switch>
			</view>
		</view>
		<view class="charge-box">
			<uni-table>
				<uni-tr class="form-table-tit">
					<uni-th width="100">名称</uni-th>
					<uni-th width="100">天数(天)</uni-th>
					<uni-th width="100">价格(元)</uni-th>
				</uni-tr>
				<uni-tr class="form-table-con">
					<uni-td>最便宜</uni-td>
					<uni-td>
						<input type="number" v-model="one_time" placeholder="请输入" />
					</uni-td>
					<uni-td>
						<input type="number" v-model="one_money" placeholder="请输入" />
					</uni-td>
				</uni-tr>
				<uni-tr class="form-table-con">
					<uni-td>最畅销</uni-td>
					<uni-td>
						<input type="number" v-model="two_time" placeholder="请输入" />
					</uni-td>
					<uni-td>
						<input type="number" v-model="two_money" placeholder="请输入" />
					</uni-td>
				</uni-tr>
				<uni-tr class="form-table-con">
					<uni-td>最省钱</uni-td>
					<uni-td>
						<input type="number" v-model="three_time" placeholder="请输入" />
					</uni-td>
					<uni-td>
						<input type="number" v-model="three_money" placeholder="请输入" />
					</uni-td>
				</uni-tr>
			</uni-table>
		</view>
		<button size="mini" @click="submit" class="btn">保存计费</button>
		<view class="tips-box">
			注:价格设置
			<view>1天 ~ 10天 不能低于6元/天</view>
			<view>10天 ~ 20天 不能低于4元/天</view>
			<view>20天 ~ 30天 不能低于3.2元/天</view>
			<view>30~180天 不能低于2元/天</view>
			<view>180~360天 不能低于1.5元/天</view>
		</view>
	</view>
</template>

<script>
	import api from '@/api/index.js';

	export default {
		data() {
			return {
				agent_id: null,
				is_open: 2,
				one_time: '',
				one_money: '',
				two_time: '',
				two_money: '',
				three_time: '',
				three_money: '',
				newDay: ''
			};
		},
		onLoad(options) {
			if (options && options.agent_id) {
				this.agent_id = options.agent_id
				this.getAgentRuleData()
			}
			this.getAgentNewday()
		},

		methods: {
			getAgentNewday() {
				api.getAgentNewday().then(res => {
					this.newDay = res.data
				})
			},
			getAgentRuleData() {
				// 获取场景类型列表
				api.getAgentRuleData({
					agent_id: this.agent_id
				}).then(res => {
					if (res.data) {
						this.one_time = res.data.one_time
						this.one_money = res.data.one_money
						this.two_time = res.data.two_time
						this.two_money = res.data.two_money
						this.three_time = res.data.three_time
						this.three_money = res.data.three_money
						this.is_open = res.data.is_open
					}
				})
			},
			showToast(title) {
				uni.showToast({
					icon: "none",
					title: title
				})
			},
			submit() {
				if (!this.one_time) {
					return this.showToast('请输入热身运动时间')
				}
				if (!this.one_money) {
					return this.showToast('请输入热身运动价格')
				}
				if (!this.two_time) {
					return this.showToast('请输入健身运动时间')
				}
				if (!this.two_money) {
					return this.showToast('请输入健身运动价格')
				}
				if (!this.three_time) {
					return this.showToast('请输入强身运动时间')
				}
				if (!this.three_money) {
					return this.showToast('请输入强身运动价格')
				}
				api.setAgentRuleData({
					agent_id: this.agent_id,
					one_time: this.one_time,
					one_money: this.one_money,
					two_time: this.two_time,
					two_money: this.two_money,
					three_time: this.three_time,
					three_money: this.three_money,
					is_open: this.is_open
				}).then(res => {
					this.showToast(res.msg)
					setTimeout(() => {
						uni.navigateBack()
					}, 1000)
				});
			},
		}
	};
</script>

<style lang="scss" scoped>
	.charge-content {
		background: url('../../static/images/home/home-bg.png') no-repeat;
		background-size: 100% 408rpx;
		padding-bottom: 100rpx;
		padding-top: 22rpx;

		.open-box {
			margin: 0 42rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 20rpx;
			font-weight: 400;
			font-size: 26rpx;
			color: #FFFFFF;

			.title {
				margin-top: 10rpx;
			}

			.open-right {
				display: flex;
				align-items: center;

				.title {
					margin-right: 22rpx;
					font-size: 30rpx;
				}
			}
		}

		.charge-box {
			margin: 0 30rpx;
			background: url('../../static/images/home/empty-bg.png') no-repeat;
			background-size: 100% 100%;
			padding: 40rpx 30rpx;
		}

		.btn {
			background: linear-gradient(311deg, #93a4fb 0%, #2f9afe 100%);
			box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(20, 135, 255, 0.4);
			border-radius: 44rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 34rpx;
			color: #ffffff;
			line-height: 88rpx !important;
			text-align: right;
			font-style: normal;
			height: 88rpx;
			margin: 36rpx 28rpx;
			width: calc(100% - 56rpx);
			text-align: center;
			border: none;

			&:after {
				border: none;
			}
		}
		.tips-box{
			margin: 0rpx 42rpx;
			line-height: 50rpx;
			color: #909399;
		}
	}
</style>